<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 100%;
        height: 410px;

        background: #ccc;
        display: none;
    }

    .img {
        float: left;
        margin: 0px 100px 0px 100px;
    }

    .img img {
        width: 300px;
        height: 400px;


    }

    .img1 {
        display: none;
        z-index: 4;
    }

    .img2 {
        display: none;
        z-index: 4;
    }

    .img3 {
        display: none;
        z-index: 4;
    }
</style>

<body>
    <div class="box">
        <div class="img">
            <img src="img/1.jpg" class="wrap1">
        </div>

        <div class="img">
            <img src="img/2.jpg" class="wrap2">
        </div>

        <div class="img">
            <img src="img/3.jpg" class="wrap3">
        </div>
    </div>
    <div class="box2">
        <img src="img/1.jpg" class="img1">
        <img src="img/2.jpg" class="img2">
        <img src="img/3.jpg" class="img3">
    </div>
    <button id="btn">换肤</button>

    <script>
        // 获取元素
        var box = document.querySelector('.box')
        var box2 = document.querySelector('.box2')
        var img1 = document.querySelector('.img1')
        var img2 = document.querySelector('.img2')
        var img3 = document.querySelector('.img3')

        btn.onclick = function () {
            box.style.display = 'block'
        }

        box.onclick = function (e) {
            if (e.target.className === 'wrap1') {
                // 使用事件委托 确认当前点击的元素
                img1.style.display = 'block'
                box.style.display = 'none'
            }
            if (e.target.className === 'wrap2') {

                img2.style.display = 'block'
                box.style.display = 'none'
            }
            if (e.target.className === 'wrap3') {

                img3.style.display = 'block'
                box.style.display = 'none'
            }
        }

    </script>
</body>



</html>